Shadow DOM
For example, when you use a new HTML id/class, there's no telling if it will conflict with an existing name used by the page. Subtle bugs creep up, CSS specificity becomes a huge issue (!important all the things!), style selectors grow out of control, and performance can suffer. The list goes on.
Shadow DOM fixes CSS and DOM. It introduces scoped styles to the web platform. Without tools or naming conventions, you can bundle CSS with markup, hide implementation details, and author self-contained components in vanilla JavaScript. https://gyazo.com/2316620895a9536fdad39c9e05af6577
シャドウ DOM は決して新しいものではありません。ブラウザーは長い間、要素の内部構造をカプセル化するためにこれを使用してきました。
例えば、既定のブラウザーコントロールが公開されている <video> 要素を思い浮かべてください。DOM には <video> 要素しか表示されませんが、そのシャドウ DOM の内部には、一連のボタンやその他のコントロールが含まれています。
シャドウ DOM 内のノードには、シャドウでないノードと全く同じように影響を与えることができます。
たとえば、子を追加したり、属性を設定したり、element.style.foo を使用して個々のノードのスタイルを設定したり、 <style> 要素内でシャドウ DOM ツリー全体へのスタイルを追加したりすることができます。
通常のノードとの違い
シャドウ DOM 内のどのコードもその外の何かに影響を与えることができず、便利なカプセル化ができることです。